<template>
	<my-box class="label" :title="data?.name" @click.stop="clickFn" small v-bind="$attrs" v-if="data?.name">
		<div class="flex">
			<div>
				<template v-for="item in data?.list" :key="item.title">
					<div class="title item">{{ item.title }}</div>
				</template>
			</div>
			<div>
				<template v-for="item in data?.list" :key="item.title">
					<div class="val item">{{ item.val }} {{ item.suffix }}</div>
				</template>
			</div>
		</div>
	</my-box>
</template>

<script setup name="myLabel">
const props = defineProps({
	data: {},
	callBack: Function
})

// 点击事件
function clickFn() {
	props.callBack?.apply()
}
</script>

<style lang="scss" scoped>
.label {
	border: 1px dashed rgb(76, 107, 209);
	background: rgba(3, 15, 39, 0.6);
	pointer-events: auto;
	cursor: pointer;
	.item {
		font-size: 12px;
		& + .item {
			margin-top: 5px;
		}
	}
	.title {
		color: rgba(255, 255, 255, 0.6);
		margin-right: 10px;
	}
	.val {
		color: rgba(255, 255, 255, 1);
	}
}
</style>
